<template>
	<view class="myQRcode">
		<nav-bars title="团队邀请码" fontColor="#fff" bgColor="transparent"></nav-bars>
		<view class="qr_topImg">
			<image src="https://manager.ryz1620.com/static/distri/makerCenter/bg.png" mode=""></image>
		</view>
		
		<!-- 头像信息 -->
		<view class="qr_head">
			<view class="qr_headImg">
				<image :src="headimg" mode=""></image>
				<view class="qr_headInfo">
					{{stewardInfo.stewardName}}
					<span>超级管家</span>
				</view>
			</view>
		</view>
		
		<view class="qr_QRimg">
			<view class="qr_userImg">
				<image :src="headimg" mode=""></image>
				<!-- 超级管家 -->
				{{stewardInfo.stewardName}}
			</view>
			<view class="my_QR">
				<image :src="qrImg" mode=""></image>
			</view>
		</view>
		
		<view class="btn" @click="toSaveQrImg">保存二维码</view>
		<button class="btn" @click="show = true" open-type="share">分享链接</button>
		
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue';
	import service_distri from '@/service/distri.js';
	import { GetQrCode, StewardInfo } from '@/service/superHK.js';
	export default{
		components:{
			navBar
		},
		data(){
			return{
				qrImg:null,
				master:null,
				username:null,
				headimg:null,
				stewardInfo:{}, //超级管家团队信息
			}
		},
		onLoad(options) {
			// this.master = options.master,
			// this.username = options.username,
			this.headimg = options.headImg
			this.getStewardInfo()
			this.getQr()
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {// 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '团队邀请',
				path: `/pages_superHK/pages/team/bindSuperHK?to_id=${uni.getStorageSync('userId')}&steward_id=${uni.getStorageSync('moduleTeamId')}`,
				imageUrl:this.$static + '/static/adminShop/shareImg.png',
			}
		},
		methods:{
			// 获取管家团队信息
			async getStewardInfo(){
				const that = this;
				let params = {
					steward_id:uni.getStorageSync('moduleTeamId'),
					share_id:''
				}
				let res = await StewardInfo(params)
				if(res.code == 1){
					that.stewardInfo = res.data
				}
			},
			
			async getQr(){
				const that = this;
				uni.showLoading({
					title:'加载中...'
				})
				let params = {
					// pages_superHK/pages/team/bindSuperHK
					path:'pages_superHK/pages/team/bindSuperHK',
					params:`to_id=${uni.getStorageSync('userId')}&steward_id=${uni.getStorageSync('moduleTeamId')}`
				}
				console.log(params)
				let res = await GetQrCode(params)
				if(res.code == 1){
					that.qrImg = res.data.mini_wx_qrcode
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
				uni.hideLoading()
			},
			
			// 点击保存二维码
			toSaveQrImg() {
				//获取相册授权
				let that = this
				uni.getSetting({
					success: (res) => {
						// console.log(res)
						// 用户还未授权
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success: (res) => {
									//用户同意授权
									that._saveImg()
									// console.log(res)
								}
							})
						} else { //用户已经授权过了
							that._saveImg()
						}
					}
				})
			},
			
			_saveImg() {
				uni.showLoading({
					title:'保存中...'
				})
				uni.downloadFile({
					url:this.qrImg, 
					success: (res) => {
						// console.log(res,'111')
			        if (res.statusCode === 200) {
			                let file = res.tempFilePath;
							// console.log(file,'0000')
							uni.saveImageToPhotosAlbum({
								filePath: file,
								success: function(res2) {
									uni.showToast({
										title: '保存成功',
										icon:"success"
									})
								},
								fail: function(err) {
									// console.log(err.errMsg);
									uni.showToast({
										title: '保存失败',
										icon:"none"
									})
								}
							})
			            }
			        }
			    });
				uni.hideLoading()
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.myQRcode{
		.qr_topImg{width: 100%;height: 352rpx;position: absolute;top: 0;left: 0;z-index: 0;image{width: 100%;height: 100%;}}
		// 头像信息
		.qr_head{
			position: relative;
			z-index: 2;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 40rpx;
			padding: 0 24rpx 0 28rpx;
			.qr_headImg{
				display: flex;
				align-items: center;
				image{width: 102rpx;height: 102rpx;border-radius: 50%;border: 4rpx solid #DBA954;}
				.qr_headInfo{
					margin-left: 24rpx;
					color: #fff;
					display: flex;
					font:500 26rpx/40rpx PingFang SC;
					flex-direction: column;
					align-items: center;
					span{
						text-align: center;
						margin-top: 10rpx;
						padding: 0 10rpx;
						// width: 100rpx;
						font:400 22rpx/36rpx PingFang SC;
						line-height: 36rpx;
						height: 36rpx;
						background-color: rgba(255,255,255,0.3);
						color: #fff;
						border-radius: 18rpx;
					}
				}
			}
			.qr_headRight{
				width: 48rpx;
				height: 48rpx;
				image{width: 48rpx;height: 48rpx;}
			}
		}
		
		//二维码图片
		.qr_QRimg{
			width: 588rpx;
			height: 672rpx;
			background-color: #fff;
			border-radius: 24rpx;
			margin: 212rpx auto 80rpx;
			padding: 200rpx 88rpx 30rpx 88rpx;
			position: relative;
			.qr_userImg{
				width: 100%;
				position: absolute;
				top: -60rpx;
				z-index: 2;
				left: 0;
				font:600 34rpx/44rpx PingFang SC;
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				image{
					width: 120rpx;
					height: 120rpx;
					box-shadow: 0rpx 3rpx 6rpx rgba(219, 169, 84, 0.5);
					border: 4rpx solid #DBA954;
					border-radius: 50%;
					margin-bottom: 32rpx;
				}
			}
			.my_QR{
				image{width: 412rpx;height: 412rpx;}
			}
		}
		.btn {
			width: 550rpx;
			text-align: center;
			height: 92rpx;
			margin: 16rpx auto;
			border-radius: 55rpx;
			background: linear-gradient(129deg, #FEA62B 0%, #F29100 100%);
			font: 500 32rpx/92rpx PingFang SC;
			color: #fff;
		}
	}
</style>
